<template>
    <div class="leftChange">
        <ThemeTitle :title="title" />
        <div class="islandAndSea">
            <div
                class="islandArea"
                v-for="(item, index) in islandList"
                :key="index"
            >
                <div class="landName">{{ item.name }}</div>
                <div
                    class="landVal"
                    :class="{ yColor: index % 2 == 0, rColor: index % 2 !== 0 }"
                >
                    {{ item.val }}
                </div>
            </div>
        </div>
        <div class="twoCharts">
            <div id="kuangshanChart"></div>
            <div id="weihuaChart"></div>
        </div>
        <!-- 红黑榜企业 -->
        <div class="geoIntro">
            <div class="geoIntroTitle">
                <div class="sideLine"></div>
                <div class="geoIntroWord">红黑榜企业排行</div>
            </div>
            <div class="redAndBlack">
                <div
                    v-for="(item, index) of redBlackList"
                    :key="index"
                    :class="{ redBlackActive: redBlack == index }"
                    @click="redBlackHandle(index)"
                >
                    {{ item }}
                </div>
            </div>
        </div>
        <!-- 红黑榜企业排行 -->
        <div class="redBlackTable">
            <div class="tableHead">
                <div v-for="(item, index) of headList" :key="index">
                    {{ item }}
                </div>
            </div>
            <div class="tableBody">
                <div
                    class="tableTr"
                    v-for="(item, index) of bodyList[redBlack]"
                    :key="index"
                >
                    <div
                        class="bodyUtil"
                        v-for="(item1, index1) of item.content"
                        :key="index1"
                    >
                        {{ item1 }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import ThemeTitle from "../../common/ThemeTitle";
import {
    getCurrentInstance,
    onMounted,
    ref,
    provide,
    onBeforeUnmount,
    watch,
    reactive,
} from "vue";
import echarts from "echarts";
export default {
    components: {
        ThemeTitle,
    },
    props: {
        whqys: Number,
        jsfjsks: Number,
        whqyfltj: Array,
        jsfjsksfltj: Array,
        hongqypm: Array,
        heiqypm: Array,
    },
    setup(props) {
        const title = provide("title", "高风险企业概况");
        let redBlack = ref(0);
        const islandList = reactive([
            { name: "危化行业", val: "17" },
            { name: "非煤矿山", val: "16" },
        ]);
        const headList = ["排名", "行政区域", "企业名称", "分值"];
        const bodyList = reactive([
            [
                // {content:['1','澄迈县','海南澄迈福岭石材有限公司','95']},
                // {content:['2','东方市','海南东方招金矿业有限公司','95']},
                // {content:['3','白沙县','白沙恒隆石业有限公司','95']},
                // {content:['4','东方市','海南振邦矿产开发有限公司','95']},
                // {content:['5','琼中县','海南琼中鸿业投资有限公司','95']}
            ],
            [
                // {content:['1','儋州市','中海石油海南天然气有限公司','0']},
                // {content:['2','儋州市','中国石化海南炼油化工有限公司','0']},
                // {content:['3','儋州市','中石化（香港）海南石油有限公司','0']},
                // {content:['4','儋州市','国投孚宝洋浦罐区码头有限公司','0']},
                // {content:['5','东方市','海南武华矿业有限责任公司','0']}
            ],
        ]);
        const redBlackList = ["红榜", "黑榜"];
        let wkChart = null;
        function drawWKChart(data) {
            var dom = document.getElementById("weihuaChart");
            wkChart = echarts.init(dom);
            let option = {
                animation: true,
                title: {
                    text: "非煤矿山",
                    show: true,
                    // "subtext": "火点类型",
                    x: "40%",
                    y: "center",
                    textStyle: {
                        color: "#fff",
                        fontSize: 12,
                        fontWeight: "normal",
                        align: "center",
                        width: "200px",
                    },
                    subtextStyle: {
                        color: "#fff",
                        fontSize: 10,
                        fontWeight: "normal",
                        align: "center",
                    },
                },
                series: [
                    {
                        type: "pie",
                        center: ["55%", "50%"],
                        radius: ["65%", "90%"],
                        color: ["#2ECACE", "#2039C3"],
                        startAngle: 135,
                        minAngle: 50,
                        labelLine: {
                            normal: {
                                length: 1,
                                length2: 1,
                            },
                        },
                        label: {
                            normal: {
                                position: "outside",
                                formatter: "{b|{b}}\n{per|{c}}",
                                backgroundColor: "rgba(255, 147, 38, 0)",
                                borderColor: "transparent",
                                borderRadius: 4,
                                rich: {
                                    a: {
                                        color: "#999",
                                        lineHeight: 20,
                                        align: "center",
                                    },
                                    hr: {
                                        borderColor: "#aaa",
                                        width: "100%",
                                        borderWidth: 1,
                                        height: 0,
                                    },
                                    b: {
                                        color: "#b3e5ff",
                                        fontSize: 10,
                                        lineHeight: 15,
                                    },
                                    c: {
                                        fontSize: 14,
                                        color: "#eee",
                                    },
                                    per: {
                                        color: "#FDF44E",
                                        fontSize: 10,
                                        padding: [1, 1],
                                        borderRadius: 2,
                                    },
                                },
                                color: "#fff",
                                fontSize: 12,
                            },
                        },
                        emphasis: {
                            show: false,
                            position: [-50, -50],
                            label: {
                                show: false,
                                formatter: "{b|{b}}",
                                backgroundColor: "rgba(255, 147, 38, 0)",
                                borderColor: "transparent",
                                borderRadius: 4,
                                rich: {
                                    a: {
                                        color: "#999",
                                        lineHeight: 22,
                                        align: "center",
                                    },
                                    hr: {
                                        borderColor: "#aaa",
                                        width: "100%",
                                        borderWidth: 1,
                                        height: 0,
                                    },
                                    b: {
                                        color: "#fff",
                                        fontSize: 18,
                                        lineHeight: 33,
                                    },
                                    c: {
                                        fontSize: 14,
                                        color: "#eee",
                                    },
                                    per: {
                                        color: "#FDF44E",
                                        fontSize: 25,
                                        padding: [5, 6],
                                        borderRadius: 2,
                                    },
                                },
                            },
                        },
                        data: data,
                    },
                    {
                        type: "pie",
                        center: ["55%", "50%"],
                        radius: ["55%", "57%"],
                        label: {
                            show: false,
                        },
                        data: [
                            {
                                value: 78,
                                name: "实例1",
                                itemStyle: {
                                    color: {
                                        x: 0,
                                        y: 0,
                                        x2: 1,
                                        y2: 0,
                                        type: "linear",
                                        global: false,
                                        // colorStops: [{
                                        //     offset: 0,
                                        //     color: "#9F17FF"
                                        // }, {
                                        //     offset: 0.2,
                                        //     color: "#01A4F7"
                                        // }, {
                                        //     offset: 0.5,
                                        //     color: "#FE2C8A"
                                        // }, {
                                        //     offset: 0.8,
                                        //     color: "#FEE449"
                                        // }, {
                                        //     offset: 1,
                                        //     color: "#00FFA8"
                                        // }],
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "#fff",
                                            },
                                            {
                                                offset: 0.2,
                                                color: "#fff",
                                            },
                                            {
                                                offset: 0.5,
                                                color: "#fff",
                                            },
                                            {
                                                offset: 0.8,
                                                color: "#fff",
                                            },
                                            {
                                                offset: 1,
                                                color: "#fff",
                                            },
                                        ],
                                    },
                                },
                            },
                        ],
                    },
                ],
            };
            wkChart.setOption(option);
            window.addEventListener("resize", () => {
                wkChart.resize();
            });
        }
        let ksChart = null;
        function drawKSChart(data) {
            var dom = document.getElementById("kuangshanChart");
            ksChart = echarts.init(dom);
            let option = {
                animation: true,
                title: {
                    show: true,
                    text: "危化企业",
                    // "subtext": "火点类型",
                    x: "35%",
                    y: "center",
                    textStyle: {
                        color: "#fff",
                        fontSize: 12,
                        fontWeight: "normal",
                        align: "center",
                        width: "200px",
                    },
                    subtextStyle: {
                        color: "#fff",
                        fontSize: 18,
                        fontWeight: "normal",
                        align: "center",
                    },
                },

                series: [
                    {
                        type: "pie",
                        center: ["50%", "50%"],
                        radius: ["65%", "90%"],
                        color: ["#2ECACE", "#2039C3"],
                        startAngle: 45,
                        minAngle: 10,
                        labelLine: {
                            normal: {
                                length: 1,
                                length2: 1,
                            },
                        },
                        label: {
                            position: "outside",
                            formatter: "{b|{b}}\n{per|{c}}",
                            backgroundColor: "rgba(255, 147, 38, 0)",
                            borderColor: "transparent",
                            borderRadius: 4,
                            rich: {
                                a: {
                                    color: "#999",
                                    lineHeight: 20,
                                    align: "center",
                                },
                                hr: {
                                    borderColor: "#aaa",
                                    width: "100%",
                                    borderWidth: 1,
                                    height: 0,
                                },
                                b: {
                                    color: "#b3e5ff",
                                    fontSize: 10,
                                    lineHeight: 15,
                                },
                                c: {
                                    fontSize: 14,
                                    color: "#eee",
                                },
                                per: {
                                    color: "#FDF44E",
                                    fontSize: 12,
                                    padding: [1, 1],
                                    borderRadius: 2,
                                },
                            },

                            color: "#fff",
                            fontSize: 14,
                        },
                        emphasis: {
                            show: false,
                            position: [0, 50],
                            label: {
                                show: false,
                                formatter: "{b|{b}}",
                                backgroundColor: "rgba(255, 147, 38, 0)",
                                borderColor: "transparent",
                                borderRadius: 4,

                                rich: {
                                    a: {
                                        color: "#999",
                                        lineHeight: 22,
                                        align: "center",
                                    },
                                    hr: {
                                        borderColor: "#aaa",
                                        width: "100%",
                                        borderWidth: 1,
                                        height: 0,
                                    },
                                    b: {
                                        color: "#fff",
                                        fontSize: 18,
                                        lineHeight: 33,
                                    },
                                    c: {
                                        fontSize: 14,
                                        color: "#eee",
                                    },
                                    per: {
                                        color: "#FDF44E",
                                        fontSize: 25,
                                        padding: [5, 6],
                                        borderRadius: 2,
                                    },
                                },
                            },
                        },
                        data: data,
                    },
                    {
                        type: "pie",
                        center: ["50%", "50%"],
                        radius: ["55%", "57%"],
                        label: {
                            show: false,
                        },
                        data: [
                            {
                                value: 78,
                                name: "实例1",
                                itemStyle: {
                                    color: {
                                        x: 0,
                                        y: 0,
                                        x2: 1,
                                        y2: 0,
                                        type: "linear",
                                        global: false,
                                        // colorStops: [{
                                        //     offset: 0,
                                        //     color: "#9F17FF"
                                        // }, {
                                        //     offset: 0.2,
                                        //     color: "#01A4F7"
                                        // }, {
                                        //     offset: 0.5,
                                        //     color: "#FE2C8A"
                                        // }, {
                                        //     offset: 0.8,
                                        //     color: "#FEE449"
                                        // }, {
                                        //     offset: 1,
                                        //     color: "#00FFA8"
                                        // }],
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "#fff",
                                            },
                                            {
                                                offset: 0.2,
                                                color: "#fff",
                                            },
                                            {
                                                offset: 0.5,
                                                color: "#fff",
                                            },
                                            {
                                                offset: 0.8,
                                                color: "#fff",
                                            },
                                            {
                                                offset: 1,
                                                color: "#fff",
                                            },
                                        ],
                                    },
                                },
                            },
                        ],
                    },
                ],
            };
            ksChart.setOption(option);
            window.addEventListener("resize", () => {
                ksChart.resize();
            });
        }
        function redBlackHandle(index) {
            redBlack.value = index;
        }
        watch(
            () => [
                props.whqys,
                props.jsfjsks,
                props.jsfjsksfltj,
                props.whqyfltj,
                props.hongqypm,
                props.heiqypm,
            ],
            ([
                newValue,
                newValue1,
                newValue2,
                newValue3,
                newValue4,
                newValue5,
            ]) => {
                islandList[0].val = newValue;
                islandList[1].val = newValue1;
                //危化
                let weihuaChartData = [];
                newValue3.forEach((item, index) => {
                    weihuaChartData[index] = {
                        name: item.lb,
                        value: item.sl,
                    };
                });
                drawKSChart(weihuaChartData);
                //非煤
                let feimeiChartData = [];
                newValue2.forEach((item, index) => {
                    feimeiChartData[index] = {
                        name: item.lb,
                        value: item.sl,
                    };
                });
                drawWKChart(feimeiChartData);

                newValue4.forEach((item, index) => {
                    if (index < 5) {
                        bodyList[0][index] = {
                            content: [item.pm, item.ssqy, item.qymc, item.fz],
                        };
                    }
                });

                newValue5.forEach((item, index) => {
                    if (index < 5) {
                        bodyList[1][index] = {
                            content: [item.pm, item.ssqy, item.qymc, item.fz],
                        };
                    }
                });
            }
        );
        onBeforeUnmount(() => {
            if (wkChart) {
                echarts.dispose(wkChart);
            }
            if (ksChart) {
                echarts.dispose(ksChart);
            }
        });
        onMounted(() => {
            drawWKChart();
            drawKSChart();
        });
        return {
            title,
            islandList,
            redBlackList,
            headList,
            bodyList,
            redBlackHandle,
            redBlack,
        };
    },
};
</script>

<style lang="stylus" scoped>
@media (max-width: 2880px) {
    .leftChange {
        .islandAndSea {
            width: vw(364);
            height: vh(100);
            margin-top: vh(17);
            display: flex;
            justify-content: space-around;
            background: url('/data/images/hngk/littlerec.png') no-repeat;
            background-size: 100% 100%;

            .islandArea {
                width: vw(100);
                height: vh(100);
                text-align: center;

                .landName {
                    line-height: vh(50);
                    width: 100%;
                    font-size: vw(14);
                    cursor: pointer;
                }

                .landVal {
                    line-height: vh(50);
                    width: 100%;
                    font-size: vw(19);
                }

                .yColor {
                    color: rgba(255, 188, 50, 1);
                }

                .rColor {
                    color: rgba(255, 57, 118, 1);
                }
            }
        }

        .twoCharts {
            height: vh(100);
            width: vh(364);
            margin-top: vh(25);
            margin-bottom: vh(25);
            display: flex;
            justify-content: space-between;

            #weihuaChart {
                flex-shrink: 0;
                width: vh(182);
                height: vh(100);
            }

            #kuangshanChart {
                flex-shrink: 0;
                width: vh(182);
                height: vh(100);
            }
        }

        .geoIntro {
            width: vw(365);
            margin-top: vh(20);
            display: flex;
            justify-content: space-between;

            .geoIntroTitle {
                margin-bottom: vh(13);
                display: flex;

                .sideLine {
                    width: vw(2);
                    height: vh(15);
                    margin-right: vw(10);
                    background: #86ceeb;
                }

                .geoIntroWord {
                    color: #00EAFF;
                    font-size: vw(16);
                }
            }

            .redAndBlack {
                float: right;
                width: vw(180);
                height: vh(22);
                display: flex;

                div {
                    width: vw(90);
                    height: vh(22);
                    line-height: vh(22);
                    font-size: vw(12);
                    text-align: center;
                    background: #012332;
                    cursor: pointer;
                }

                .redBlackActive {
                    border: 1px solid #1398cf;
                    background: #023850;
                }
            }
        }

        .redBlackTable {
            width: 100%;
            height: vh(166);

            .tableHead {
                height: vh(34);
                width: 100%;
                line-height: vh(34);
                font-size: vw(14);
                display: flex;
                justify-content: space-between;

                div {
                    flex: 2;
                    text-align: center;
                    color: rgba(55, 220, 255, 1);
                }

                div:nth-child(3) {
                    flex: 3;
                }

                div:nth-child(4) {
                    flex: 1;
                }
            }

            .tableBody {
                .tableTr {
                    height: vh(28);
                    width: 100%;
                    font-size: vw(12);
                    line-height: vh(28);
                    display: flex;
                    justify-content: space-between;
                    border-bottom: 1px solid #213034;

                    .bodyUtil {
                        height: vh(28);
                        flex: 2;
                        box-sizing: border-box;
                        text-align: center;
                        color: #fff;
                    }

                    .bodyUtil:nth-child(3) {
                        flex: 3;
                    }

                    .bodyUtil:nth-child(4) {
                        flex: 1;
                    }
                }
            }
        }
    }
}
</style>    
<style lang="stylus" scoped>
@media (min-width: 3000px) {
    .leftChange {
        .islandAndSea {
            width: vw1(414);
            height: vh(150);
            margin-top: vh(37);
            margin-bottom: vh(37);
            display: flex;
            justify-content: space-around;
            background: url('/data/images/hngk/littlerec.png') no-repeat;
            background-size: 100% 100%;

            .islandArea {
                width: vw1(200);
                height: vh(150);
                text-align: center;

                .landName {
                    line-height: vh(50);
                    width: 100%;
                    font-size: vw1(14);
                    cursor: pointer;
                }

                .landVal {
                    line-height: vh(50);
                    width: 100%;
                    font-size: vw1(19);
                }

                .yColor {
                    color: rgba(255, 188, 50, 1);
                }

                .rColor {
                    color: rgba(255, 57, 118, 1);
                }
            }
        }

        .twoCharts {
            height: vh(400);
            width: vw1(414);
            margin-top: vh(25);
            margin-bottom: vh(25);

            // display:flex
            // justify-content:space-between
            #weihuaChart {
                // flex-shrink:0
                width: vw1(414);
                height: vh(200);
            }

            #kuangshanChart {
                // flex-shrink:0
                width: vw1(414);
                height: vh(200);
            }
        }

        .geoIntro {
            width: vw1(414);
            margin-top: vh(20);
            display: flex;
            justify-content: space-between;

            .geoIntroTitle {
                margin-bottom: vh(13);
                display: flex;

                .sideLine {
                    width: vw1(2);
                    height: vh(15);
                    margin-right: vw1(10);
                    background: #86ceeb;
                }

                .geoIntroWord {
                    color: #00EAFF;
                    font-size: vw1(16);
                }
            }

            .redAndBlack {
                float: right;
                width: vw1(180);
                height: vh(22);
                display: flex;

                div {
                    width: vw1(90);
                    height: vh(22);
                    line-height: vh(22);
                    font-size: vw1(12);
                    text-align: center;
                    background: #012332;
                    cursor: pointer;
                }

                .redBlackActive {
                    border: 1px solid #1398cf;
                    background: #023850;
                }
            }
        }

        .redBlackTable {
            width: vw1(414);
            height: vh(400);
            margin-top: vh(0);

            .tableHead {
                height: vh(50);
                width: 100%;
                line-height: vh(50);
                font-size: vw1(16);
                display: flex;
                justify-content: space-between;

                div {
                    flex: 1;
                    text-align: center;
                    color: rgba(55, 220, 255, 1);
                }

                div:nth-child(3) {
                    flex: 3;
                }
            }

            .tableBody {
                .tableTr {
                    height: vh(40);
                    width: 100%;
                    font-size: vw1(14);
                    line-height: vh(40);
                    display: flex;
                    justify-content: space-between;
                    border-bottom: 1px solid #213034;

                    .bodyUtil {
                        height: vh(40);
                        flex: 1;
                        box-sizing: border-box;
                        text-align: center;
                        color: #fff;
                    }

                    .bodyUtil:nth-child(3) {
                        flex: 3;
                    }
                }
            }
        }
    }
}
</style>